@use "scss/colors";
@use "scss/variables";

@mixin header-background($color, $hoverColor) {
  background-color: $color;

  &:hover {
    background-color: $hoverColor;
    cursor: pointer;
  }
}

@keyframes highlight {
  0%,
  50% {
    position: relative;
    box-shadow: variables.$box-shadow-highlight colors.$blue-200;
    z-index: 1;
  }

  99% {
    z-index: 1;
  }

  100% {
    box-shadow: 0 0 0 0 transparent;
    z-index: 0;
  }
}

.streamHeaderContent {
  @include header-background(colors.$foreground, colors.$grey-30);

  border-bottom: 1px solid colors.$grey-50;
  padding: 0 variables.$spacing-xl 0 variables.$spacing-md;
  margin-bottom: 1px;
  gap: variables.$spacing-md;
  min-height: 50px;
  height: 50px;
  align-items: center;
  scrollbar-gutter: stable;

  &.removed {
    @include header-background(colors.$red-30, colors.$red-40);
  }

  &.added {
    @include header-background(colors.$green-30, colors.$green-40);
  }

  &.changed {
    @include header-background(colors.$blue-30, colors.$blue-40);
  }

  &.disabled {
    background-color: colors.$grey-50;
  }

  &.highlighted {
    animation: highlight 2s ease-out;
  }
}

.syncCell {
  height: 100%; // cover the parent so it can intercept & ignore row clicks
  width: 75px;
  text-align: center;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: variables.$spacing-md;
  cursor: default;
}

.fieldsCell {
  width: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.syncModeCell {
  width: variables.$width-sync-mode-dropdown;
}

.arrowCell {
  width: 20px;
  text-align: center;
}

.dataDestinationCell {
  width: 170px;
}

.undefinedField {
  font-style: italic;
}
